<template>
    <div class="common-layout" style="margin-left: -100px;">
        <el-container style="margin-left: 100px">
            <el-header style="background-color: black;">
                <span type="danger" style="color: aqua;">当前登录人:{{ store.ccstore.nickName }} </span>
                <RouterLink to="/" style="margin-left: 1000px;">退出登录</RouterLink>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-col :span="12">
                        <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                            default-active="2" text-color="#fff" style="width: 200px;" router>
                            <!-- 渲染菜单 -->
                            <template v-for="item in menulist" :key="item.menuId">
                                <!-- 如果有子菜单，使用 el-sub-menu -->
                                <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.url">
                                    <template #title>
                                        <span>{{ item.menuName }}</span>
                                    </template>
                                    <!-- 渲染子菜单 -->
                                    <el-menu-item v-for="child in item.children" :key="child.menuId" :index="child.url">
                                        {{ child.menuName }}
                                    </el-menu-item>
                                </el-sub-menu>

                                <!-- 如果没有子菜单，直接使用 el-menu-item -->
                                <el-menu-item v-else :index="item.url">
                                    {{ item.menuName }}
                                </el-menu-item>
                            </template>
                        </el-menu>
                    </el-col>
                </el-aside>
                  <el-main>
                    <RouterView />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { useCounterStore } from '@/stores/counter';
const apiUrl = import.meta.env.VITE_APP_API_URL;
let router = useRouter();
let store = useCounterStore();


// 接受菜单数据的变量
const menulist = ref([]);

// 将扁平化菜单数据转换为嵌套结构
const buildMenuTree = (menus: any[]) => {
    // 检查 menus 是否为数组且不为空
    if (!Array.isArray(menus) || menus.length === 0) {
        console.log('菜单数据为空或不是数组');
        return [];
    }
    const menuMap = new Map(); // 用于存储菜单项
    const menuTree: any = []; // 最终的嵌套菜单结构

    // 将菜单项存入 Map
    menus.forEach(menu => {
        menu.children = []; // 初始化子菜单
        menuMap.set(menu.menuId, menu);
    });

    // 构建嵌套结构
    menus.forEach(menu => {
        if (menu.pid == 0) {
            // 顶级菜单
            menuTree.push(menu);
            console.log('子集', menuTree)
        }
        if (menu.pId == 1) {
            // 一级菜单
            menuTree.push(menu);
            console.log('子集的子集', menuTree)
        }
        else {
            // 子菜单，添加到父菜单的 children 中
            const parentMenu = menuMap.get(menu.pId);
            if (parentMenu) {
                parentMenu.children.push(menu);
            }
        }
    });

    console.log('树状菜单', menuTree);
    return menuTree;
};

// 获取菜单数据
const getmenu = () => {
    axios.get(apiUrl+'T5/Message/GetMenuByUserId', {
        params: {
            UserId: store.ccstore.userId
        }
    })
        .then(res => {
            // 检查 res.data.list 是否为数组且不为空
            if (Array.isArray(res.data.data) && res.data.data.length > 0) {
                menulist.value = buildMenuTree(res.data.data);
                console.log('菜单数据', menulist.value);
            } else {
                console.log('获取的菜单数据为空或不是数组');
            }
        })
        .catch(error => {
            console.error('获取菜单数据失败:', error);
        });
}

onMounted(() => {
    getmenu();
});

const handleOpen = (key: string, keyPath: string[]) => {
    console.log('打开菜单:', key, keyPath);
};

const handleClose = (key: string, keyPath: string[]) => {
    console.log('关闭菜单:', key, keyPath);
};
</script>

